This was mostly handled with Tailwind's auto upgrade utility.
It fixes one issue where the cursor-default wasn't respected.
Now using antialiased font smoothing for better visual clarity.

Updated related packages:

• Tailwind
• PostCSS
• tailwind-scrollbar
• @tailwindcss/typography

Removed tailwind-animate in favor of tw-animate-css due to lacking v4 support.

Greptile Summary

This PR migrates the desktop app from Tailwind CSS v3 to v4, replacing tailwind.config.js with CSS-native @theme tokens, switching from @kobalte/tailwindcss ui-* variants to standard data-* variants, and swapping tailwindcss-animate for tw-animate-css. The auto-upgrade tool handled most of the mechanical conversion.

• P1 – broken shimmer animation: The shimmer keyframe was only defined in the deleted apps/desktop/tailwind.config.js. animate-shimmer is still used in ExportPage.tsx (lines 747, 762) with no replacement @keyframes block in main.css or theme.css.
• P1 – data-pressed: invalid in Tailwind v3 (web app): CameraPreviewWindow.tsx was updated to use data-pressed:bg-gray-3 / data-pressed:text-gray-12, but apps/web still runs Tailwind v3, which requires bracket syntax (data-[pressed]:). All five toolbar buttons will silently lose their pressed-state highlight.
• P2 – focus ring removed from Toggle: outline-2 outline-offset-2 outline-blue-300 were dropped from the base toggle control styles without a focus-visible: replacement.

Confidence Score: 3/5

Not safe to merge as-is — two P1 regressions affect visible user-facing behavior.

Two P1 bugs are present: the shimmer loading animation is broken in the export page, and pressed-state toolbar button styles are silently dropped in the web app due to a Tailwind v3/v4 version mismatch. The rest of the migration looks mechanically correct.

apps/desktop/src/routes/editor/ExportPage.tsx (missing shimmer keyframe) and apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx (data-pressed: incompatible with Tailwind v3).

Important Files Changed

Fix the following 3 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 3
apps/desktop/src/routes/editor/ExportPage.tsx:747-762
**Missing `shimmer` keyframe definition**

`animate-shimmer` is still used here, but the `shimmer` keyframe was only defined in `apps/desktop/tailwind.config.js`, which was deleted as part of this migration. No replacement definition was added to `packages/ui-solid/src/main.css` or `apps/desktop/src/styles/theme.css`. The loading skeleton shimmer effect on the export preview will be a no-op — the element will have the animation class but no matching `@keyframes` block, so nothing will animate.

### Issue 2 of 3
apps/web/app/(org)/dashboard/caps/components/web-recorder-dialog/CameraPreviewWindow.tsx:495-556
**`data-pressed:` variant not supported in Tailwind v3**

The web app (`apps/web`) uses Tailwind v3 (declared as `"tailwindcss": "^3"` in its `package.json`). Tailwind v3 requires bracket syntax for arbitrary data-attribute variants: `data-[pressed]:bg-gray-3`, not `data-pressed:bg-gray-3`. The shorthand `data-pressed:` without brackets is a Tailwind v4-only feature. Since the old `ui-pressed:` variant (from `@kobalte/tailwindcss`, which was also removed from `packages/ui/style/tailwind.config.js`) has been replaced with the v4 syntax, these five toolbar buttons will never show their pressed/active state background highlight.

### Issue 3 of 3
apps/desktop/src/components/Toggle.tsx:4-7
**Focus ring styles removed from Toggle**

The `outline-2 outline-offset-2 outline-blue-300` classes were dropped from the base `toggleControlStyles`. These set the shape, width, and color of the focus indicator used by keyboard and assistive-technology users. Verify that an equivalent `focus-visible:outline-*` ring is applied via another mechanism; otherwise toggling elements will lose their focus state entirely.

_{Reviews (1): Last reviewed commit: "format" | Re-trigger Greptile}

Greptile also left 3 inline comments on this PR.